<template>
  <div>
    <div class='yun-header' :class='{"headfixed":fixedFalg}' v-if='creenWidth>480'>
      <div class='pagetop'>
        <img src="@/assets/img/top.png" alt="" v-if='creenWidth>480'>
        <img src="@/assets/img/app/top.png" alt="" v-if='creenWidth<480'>
        <p class='toptitle'>{{pageData.topTitle}}</p>
      </div>
      <div class="yun-header-content" >
        <div class="en-logo" @click="routeToPage('/')">
          <img src="@/assets/img/logo.png" alt="" />
        </div>
        <div class="yun-goto">
          <div class="yun-menu">
            <div class="yun-menu-item" :class='{"active":activeMenu=="/token"}' @click="routeToPage('/token')">
              <span>{{pageData.menu.token}}</span>
              <i class="ysan"></i>
            </div>
            <div class="point">.</div>
            <div class="yun-menu-item" :class='{"active":activeMenu=="/about"}' @click="routeToPage('/about')">
              <span>{{pageData.menu.about}}</span>
              <i class="ysan"></i>
            </div>
            <div class="point">.</div>
            <div class="yun-menu-item" @click.stop="showlangwbook=!showlangwbook">
              <span>{{pageData.menu.whitepaper}}</span>
              <!-- <i class="ysan"></i> -->
              <div class='langwhitepaper' v-show="showlangwbook">
                <a href="http://static.exploitnetwork.com/en.pdf" target="_blank" rel="noopener noreferrer">English</a>
                <a href="http://static.exploitnetwork.com/cn.pdf" target="_blank" rel="noopener noreferrer">简体中文</a>
              </div>
            </div>
            <div class="point">.</div>
            <div class="yun-menu-item" @click='changeLangEvent(pageData.menu.langType)'>
              <span>{{pageData.menu.lang}}</span>
              <i class="ysan"></i>
            </div>
          </div>
          <a href="https://t.me/ExploitNetwork" target="_blank">
          <div class="yun-btn">{{pageData.join}}</div></a>
        </div>
      </div>
    </div>
    <div class="yun-app-menu" :class='{"headfixed":fixedFalg}' v-if='creenWidth<480'>
        <div class='pagetop'>
          <img src="@/assets/img/top.png" alt="" v-if='creenWidth>480'>
          <img src="@/assets/img/app/top.png" alt="" v-if='creenWidth<480'>
          <p class='toptitle'>{{pageData.topTitle}}</p>
        </div>
        <div class='yun-app-head'>
          <div class='yun-logo' @click="routeToPage('/')">
            <img src="@/assets/img/app/logo.png" alt="">
          </div>
          <div class='yun-right'>
              <img class='menubtn' src="@/assets/img/app/menubtn.png" alt="" @click.stop="showAppMenuEvent">
          </div>
        </div>
        <div class='app-menu-box' :class='{"AppMenu":showAppMenuFlag}'  v-if='creenWidth<480'>
      <div class='app-menu'>
          <div class='appmenu-item' :class='{"active":activeMenu=="/token"}' @click.stop="routeToPage('/token')"><span>{{pageData.menu.token}}</span></div>
          <div class='appmenu-item' :class='{"active":activeMenu=="/about"}' @click.stop="routeToPage('/about')"><span>{{pageData.menu.about}}</span></div>
          <div class='appmenu-item'  @click="showlangwbook=!showlangwbook"><span>{{pageData.menu.whitepaper}}</span></div>
          <div class='langwhitepaper' v-show="showlangwbook" @click='showlangwbook=false;showAppMenuFlag=false'>
            <a href="/Exploit Network Whitepaper__CN.pdf" target="_blank" rel="noopener noreferrer">简体中文</a>
            <a href="/Exploit Network Whitepaper_CN.pdf" target="_blank" rel="noopener noreferrer">English</a>
          </div>
          <div class='appmenu-item'  @click='changeLangEvent(pageData.menu.langType)'><span>{{pageData.menu.lang}}</span></div>
      </div>
    </div>
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      creenWidth: document.body.clientWidth,
      activeMenu:"/home",
      fixedFalg:false,
      showlangwbook:false,
      showAppMenuFlag:false,
      pageData:this.$lang[this.$store.state.lang].head,
    };
  },
  created(){
    window.addEventListener('scroll',this.handleScroll,true)
  },
  methods:{
    handleScroll(){
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      if(scrollTop>100){
        this.fixedFalg = true
      }else{
        this.fixedFalg = false
      }
    },
    changeLangEvent(lang){
      if(lang=='en'){
        this.$store.commit('setLangEvent','zh')
      }else{
        this.$store.commit('setLangEvent','en')
      }
      this.showAppMenuFlag=false
    },
    showAppMenuEvent(){
      this.showAppMenuFlag=!this.showAppMenuFlag
    },
    routeToPage(path){
      this.showAppMenuFlag=false
      this.$router.push(path)
    }
  },
  watch:{
     $route:{
      handler(to,from){
        this.activeMenu = to.path
      },
      deep: true
    },
    '$store.state.lang'(val){
        this.pageData=this.$lang[this.$store.state.lang].head
    },
  }
};
</script>
<style lang='scss' scoped>
.yun-header{
  width:100%;
  // max-width: 1920px;
  // min-width: 1500px;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  // transform: translateX(-50%);
  z-index:100;
  // &.headfixed{
  //   position: fixed;
  //   top:0;
  //   left:0;
  //   right:0;
  //   transform: translateX(-50%);
  //   background: rgba(255, 255, 255, 0.9);
  // }
}
.pagetop{
    // max-width:1920px;
    // min-width: 1500px;
    width:100%;
    margin:0 auto;
    position: relative;
    img{
      width:100%;
    }
    .toptitle{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      color:#fff;
      font-size: 18px;
    }
  }
.yun-header-content {
  margin: 0 auto;
  // max-width: 1920px;
  width:1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  
  .en-logo {
    width: 120px;
    cursor: pointer;
    img {
      width: 100%;
    }
  }
  .yun-goto {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .yun-menu {
      display: flex;
      .yun-menu-item {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #000;
        position: relative;
        cursor: pointer;
        &.active {
          color: #2947b9;
          .ysan {
            position: absolute;
            top: 40px;
            width: 10px;
            height: 9px;
            background-image: url("~@/assets/img/san.png");
            background-repeat: no-repeat;
          }
        }
        .langwhitepaper{
          min-width: 100px;
          position: absolute;
          top:100%;
          left: 0;
          background: #fff;
          a{
            display: block;
            width:100%;
            line-height:50px;
            color: #000;
          }
        }
      }
      .point {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 50px;
      }
    }
    .yun-btn {
      width: 160px;
      height: 50px;
      background: linear-gradient(90deg, #4a5ed2 0%, #805ddd 100%);
      border-radius: 8px;
      text-align: center;
      line-height: 50px;
      font-size: 16px;
      color: #fff;
      margin-left: 78px;
      cursor: pointer;
    }
  }
}
.yun-app-menu{
    width:100%;
    position: relative;
  //   position: absolute;
  // top: 0;
  // z-index:100;
    .pagetop{
    width:100%;
    margin:0 auto;
    position: relative;
    img{
      width:100%;
    }
    .toptitle{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      color:#fff;
      font-size: 18px;
    }
  }
    &.headfixed{
      position: fixed;
      top:0;
      background: rgba(255, 255, 255, 0.9);
      z-index: 100;
    }
    .yun-app-head{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:10px 20px;
    }
    .yun-logo{
      width:100px;
      img{
        width:100%;
      }
    }
    .yun-right{
        display: flex;
        align-items: center;
        .menubtn{
            width:30px;
            height:auto;
        }
    }
}
.app-menu-box{
  position: absolute;
  width:100%;
  top:100%;
  z-index: 110;
  transition: all 0.5s linear;
  &.AppMenu{
    .app-menu{
      height:236px;
    }
  }
}
.app-menu{
  background:#fff;
  height:0;
  overflow: hidden;
  transition: all 0.5s linear;
  .appmenu-item{
    width:100%;
    padding:20px 20px;
    text-align: center;
    font-size:16px;
        font-weight: 500;
        color: #000000;
        position: relative;
        cursor: pointer;
        &.active {
          color: #2947b9;
          .ysan {
            position: absolute;
            top: 40px;
            width: 10px;
            height: 9px;
            background-image: url("~@/assets/img/san.png");
            background-repeat: no-repeat;
          }
        }
        
  }
  .langwhitepaper{
          display: flex;
          justify-content: space-around;
          a{
            color:#000;
          }
        }
}
@media screen and (max-width: 1200px) {
    .yun-header{
        min-width: 1280px;
    }
}

@media screen and (max-width: 480px) {
    .yun-header{
        min-width: 100%;
    }
}
</style>
